<!--  -->
<template>
  <!-- <div class="lsh-box">
    <div class="lsh-header"></div>
  </div> -->
  <div id="white-board-container" class="white-board-container"></div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { App, Leafer, Frame, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)
import '@leafer-in/find' // 导入查找元素插件
import { Snap } from 'leafer-x-snap';

let app: App;
let snap: Snap;

onMounted(() => {
  app = new App({ view: 'white-board-container', fill: '#333' })
  app.add(app.tree = new Leafer({ type: 'design' })) // 添加 tree 层
  app.add(app.sky = new Leafer())  // 添加 sky 层
  app.sky.add(app.editor = new Editor())
  snap = new Snap(app, {
    snapSize: 5,
    strokeWidth: 2,
  });
  snap.enable(true);
  app.tree.add([
    Rect.one({ id: '11', editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] ,rotation:45}, 100, 100),
    Rect.one({
      id: '22', editable: true, fill: '#FFE04B',rotation:45, cornerRadius: [0, 20, 20, 0], hoverStyle: { // // hover 样式
        fill: 'rgba(50,205,121, 0.8)'
      }
    }, 300, 100,)]) // 添加图形编辑器，用于选中元素进行编辑操作 //
})
</script>
<style scoped lang='less' >
.white-board-container {
  width: 100%;
  height: 100%;
}
</style>